<template>
  <div style="width:100%">
    <el-table
      :data="newValue"
      border
      empty-text="暂无规格"
    >
      <el-button slot="empty" type="success" size="medium" icon="el-icon-edit" @click="handleAdd">新增</el-button>
      <el-table-column
        prop="name"
        label="规格名称"
        width="200"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" autofocus />
        </template>
      </el-table-column>
      <el-table-column
        prop="faceImg"
        label="缩率图"
        width="300"
      >
        <template slot-scope="scope">
          <Single-image v-model="scope.row.faceImg" width="auto" :single-image="true" />
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        width="120"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.price" />
        </template>
      </el-table-column>
      <el-table-column
        prop="referencePrice"
        label="原价"
        width="120"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.referencePrice" />
        </template>
      </el-table-column>
      <el-table-column
        prop="ssold"
        label="销量增量"
        width="120"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.ssold" />
        </template>
      </el-table-column>
      <el-table-column
        prop="stock"
        label="库存"
        width="150"
      >
        <template slot-scope="scope">
          <el-input v-if="!scope.row.gid||scope.row.gid ===''" v-model="scope.row.stock" />
          <span v-else>{{ scope.row.stock }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="handleRemove(scope.$index)">删除</el-button>
          <el-button v-if="scope.$index === newValue.length -1" type="success" size="small" @click="handleAdd()">新增</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import SingleImage from '@/components/Upload/SingleImage'
import { deepClone } from '@/utils/util'
export default {
  components: {
    SingleImage
  },
  props: {
    value: {
      type: Array,
      required: false,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      row: [
        {
          label: '编辑',
          value: false
        },
        {
          label: '保存',
          value: true
        }
      ],
      isEdit: [],
      temp: {
        gid: '',
        name: '',
        price: 0,
        faceImg: '',
        referencePrice: 0,
        ssold: 0,
        stock: 0
      }
    }
  },
  computed: {
    newValue: {
      get() {
        return this.value
      },
      set(value) {
        this.$forceUpdate()
      }
    }
  },
  watch: {
    newValue: {
      handler(value) {
        this.$emit('input', value)
      },
      deep: true
    }
  },
  methods: {
    deepClone,
    // 新增规格
    handleAdd() {
      const temp = {
        gid: '',
        name: '',
        price: 0,
        referencePrice: 0,
        stock: 0,
        ssold: 0,
        isEdit: true
      }
      this.newValue.push(temp)
    },
    // 删除规格
    handleRemove(index) {
      // 获取新的data
      this.newValue.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
    .add-btn{
        flex-flow: 0 0 100%;
        margin-top: 20px;
    }
    .el-form-item {
        margin-bottom: 22px;
    }

    .el-button-group{
      display: flex;
      flex-direction: column;
    .el-button--mini{
        padding: 2px 8px;
        font-size: 12px;
        border-radius: 0;
        width: 30px;
        &:first-child{
          border-top-right-radius: 3px;
        }
        &:last-child{
          border-bottom-right-radius: 3px;
          margin-top:-2px;
        }
      }
    }
    .flex{
      .el-form-item__content{
        display: flex;
        align-items: center;
      }
      .el-input__inner{
        border-top-right-radius:0 ;
        border-bottom-right-radius:0 ;
        border-right: 0;
      }
    }
    .border-none{
      .el-input__inner{
        border:none;
        background-color: transparent;
      }
    }
    .el-table{
      th{
        >.cell{
          padding-left: 25px;
          padding-right: 25px;
        }
      }
    }
    .el-table__body{
      .el-table__row{
        .cell{
          span{
            padding-left: 15px;
            padding-right: 15px;
          }
        }
      }
    }
</style>
